<template>
  <view>
    <!-- 搜索框开始 -->
    <view class="goods_list_search">
      <!-- 搜索框组件 -->
      <SearchInput></SearchInput>
    </view>
    <!-- 搜索框结束 -->
    <!-- 商品列表开始 -->
    <view class="goods_list">
      <!-- 商品列表组件 -->
      <GoodsList :goodsList="goodsListData"></GoodsList>
    </view>
    <!-- 商品列表结束 -->
    <!-- <button type="primary" @tap="getGoodsList()">拉取</button> -->
  </view>
</template>

<script>
import SearchInput from '../../components/SearchInput/SearchInput.vue';
import GoodsList from '../../components/GoodsList/GoodsList.vue';
export default {
  components: {
    SearchInput,
    GoodsList
  },
  // 生命周期 页面加载
  onLoad(data) {
    var _me = this;
    // console.log(data);
    _me.query = data.query;
    _me.cid = data.cid;
    _me.getGoodsList();
    // 开启 "获取列表" 监听
    uni.$on('GetGoodsList', this.getGoodsList);
  },
  // 生命周期 页面卸载
  onUnload() {
    // 关闭 "获取列表" 监听
    uni.$off('GetGoodsList', this.getGoodsList);
  },
  // 生命周期 页面显示
  onShow() {
    // 开启 "获取列表" 监听
    uni.$on('GetGoodsList', this.getGoodsList);
  },
  // 生命周期 页面隐藏
  onHide() {
    // 关闭 "获取列表" 监听
    uni.$off('GetGoodsList', this.getGoodsList);
  },
  // 生命周期 下拉刷新
  onPullDownRefresh(e) {
    // console.log("正在刷新")
    this.pagenum = 0;
    this.goodsListData = {};
    this.getGoodsList()
    uni.stopPullDownRefresh();
    // console.log("刷新完毕")
  },
  data() {
    return {
      query: '',
      cid: '',
      pagenum: 0,
      pagesize: 10,
      goodsListData: {}
    };
  },
  methods: {
    /* 获取楼层内容 */
    getGoodsList(str) {
      var _me = this;
      // console.log('监听事件【获取列表】', '获取新列表');

      if (str == 'new') {
        _me.$data.pagenum = 0;
        goodsListData: new Object();
      }

      // 已经到底了
      if (_me.$data.pagenum == -1) {
        uni.showToast({
          title: '已经到底了！',
          mask: true,
          duration: 500
        });
        return;
      }

      uni.showLoading({
        title: '正在拉取新商品',
        mask: true
      });

      uni.request({
        url: 'https://api-hmugo-web.itheima.net/api/public/v1/goods/search',
        data: {
          query: _me.query,
          cid: _me.cid,
          pagenum: ++_me.pagenum,
          pagesize: _me.pagesize
        },
        success(e) {
          // console.log('旧数据', _me.goodsListData);
          // console.log('新数据', e.data.message);
          // 是否为首次
          if (_me.goodsListData.goods == undefined) {
            // 首次，直接使用新数据
            _me.goodsListData = e.data.message;
          } else {
            // 非首次
            // 已经没有新数据了
            if (e.data.message.goods.length == 0) {
              // 把页数设置为-1，不再取了
              _me.$data.pagenum = -1;
            } else {
              // 遍历新商品数组
              e.data.message.goods.forEach(function(e) {
                // 添加到旧数组中
                var oldGoods = _me.goodsListData.goods;
                oldGoods.push(e);
              });
              // 更改页面
              _me.goodsListData.pagenum = e.data.message.pagenum;
            }
          }
          // console.log('最终数据', _me.goodsListData);
          // 发送 "列表被改变" 监听
          uni.$emit('GoodsListChange', _me.goodsListData);
        },
        complete() {
          uni.hideLoading();
        }
      });
    }
  }
};
</script>

<style lang="scss">
.goods_list {
  height: calc(100vh - var(--window-top) - 90rpx);
}
</style>
